TextArea 输入框(新版)
用于多行文本输入,支持字数统计、自动高度、错误提示、无边框等多种场景。
用法
基本引入
import { FQTextareaNew } from '@fq/fq-weapp-ui';
基础用法
<FQTextareaNew placeholder="请输入内容" />
非受控用法
<FQTextareaNew
defaultValue="默认内容"
showCount
onChange={(e) => console.log(e.detail?.value)}
/>
受控用法
<FQTextareaNew value={value} onChange={handleChange} />
显示字数
<FQTextareaNew placeholder="请输入内容" showCount />
字数长度限制
<FQTextareaNew placeholder="请输入内容" showCount maxLength={10} />
字数长度限制并截断
<FQTextareaNew
placeholder="请输入内容"
showCount
maxLength={10}
truncateMaxLength
/>
禁用
<FQTextareaNew placeholder="请输入内容" disabled />
<FQTextareaNew
placeholder="请输入内容"
value="禁用状态, 内容回显"
disabled
showCount
maxLength={5}
/>
错误信息
<FQTextareaNew
placeholder="请输入内容"
showCount
maxLength={60}
error="这里是报错内容区域"
/>
无边框样式
<FQTextareaNew placeholder="请输入内容" variant='borderless' />
根据内容自动增高
<FQTextareaNew placeholder="请输入内容" autoHeight />
指定显示行数
<FQTextareaNew placeholder="请输入内容" rows={3} />
属性说明
FQTextareaNew 继承了 Taro TextareaNewProps 的全部属性,以下为 FQTextareaNewProps 对 TextareaProps 的补充或修改,按功能分类:
基础属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| value | 输入框当前值(受控) | string | - |
| defaultValue | 输入框默认值 | string | '' |
| maxLength | 最大输入长度,超出后不再允许输入(覆盖 TaroTextarea 的 maxlength) | number | - |
| truncateMaxLength | 达到最大长度后是否禁止继续输入 | boolean | false |
| status | 自定义状态,可选 'error' | string | - |
内容与交互
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| showCount | 是否显示字数统计,或自定义渲染字数统计 | boolean | (length, maxLength) => ReactNode | false |
| onChange | 输入内容变化时的回调(等价于 TaroTextarea 的 onInput) | function | - |
状态与样式
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| error | 错误提示内容,输入框下方展示 | string | - |
| variant | 边框样式 | 'outlined' | 'borderless' | 'outlined' |
| className | 自定义样式类名 | string | - |
| style | 自定义样式 | CSSProperties | - |
行数与高度
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| rows | 指定显示行数,固定高度为 rows * 行高 | number | - |
| autoHeight | 内容变化时自动增高(TaroTextarea 的 autoHeight) | boolean | false |
未修改的 TextareaProps 属性(如 value、placeholder、disabled、name、onFocus、onBlur 等),请参考 TaroTextarea 组件文档。
补充说明:
- 受控模式:传入
value,由外部状态驱动展示值。 - 非受控模式:不传
value,通过defaultValue指定初始值,后续由组件内部维护。